<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css -->
    <link rel="stylesheet" href="style.css">
    <!-- icons -->
    <link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">
   <!-- swipper css -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="icon" href="img/tabimg.png">
    <title>Bugsy</title>
</head>
<body>
    <!-- HEADER  -->
    <header class="header" id ="header">
        <!-- nav  -->
      <nav class="nav container padd-15">
             <!-- nav logo -->
        <a href="#" class="nav-logo">
            <h2>Bugsy</h2>
        </a>

        <!-- nav-menu -->
        <div class="nav-menu" id="nav-menu">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#home" class="nav-link active-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#services" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#experience" class="nav-link">Experience</a>
                </li>
                <li class="nav-item">
                    <a href="#portfolio" class="nav-link">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class= "nav-link " >Contact</a>
                </li>
            </ul>
            <!-- nav close  -->
            <div class="nav-close" id="nav-close">
                <i class="lni lni-close">
                     
                </i>
            </div>
        </div>

        <!-- nav btn  -->
              <div class="nav-btns">
        
                  <!-- toggle btn  -->
                  <div class="nav-toggle" id="nav-toggle">
                    <i class="lni lni-grid-alt"></i>
                  </div>
                   
                </div>
      </nav>
    </header>

    <main class="main-content">

        <!-- home -->
        <section class="home" id="home">
            <div class="container">
                 <!-- intro  -->
                    <div class="intro">
                        <!-- avatar img  -->
                           <img src="./img/profilepic.png" alt="abhi">
                           <!-- info  -->
                            <div class="name"><b>Bugsy</b></div>
                             <span>Student , <span class="info-text"> Web Development Enthusiast</span></span>
                        <!-- social icons -->
                        <ul class="social-icons">
                            <li><a href="https://www.instagram.com"  target="_blank"><img src="https://img.icons8.com/fluency/48/000000/instagram-new.png"/></a></li>
                            <li><a href="https://twitter.com" target="_blank"><img src="https://img.icons8.com/color/48/000000/twitter--v1.png"/></a></li>
                            <li><a href="https://www.linkedin.com/in" target="_blank"><img src="https://img.icons8.com/color/48/000000/linkedin.png"/></a></li>
                            <li><a href="mailto:" target="_blank"><img src="https://img.icons8.com/color/48/000000/gmail-new.png"/></a></li>
                         </ul>
                         <div>
                             <a href="#contact" class="btn btn-default">Write me a Message 😊</a>
                         </div>
                         <!-- scroll-down mouse wheel  -->
                         <div class="scroll-down">
                             <a href="#" class="mouse-wrapper">
                                <span>Scroll Down</span>
                                <span class="mouse">
                                    <span class="wheel"></span>
                                </span>
                             </a>
                         </div>
                         
                   </div>         
                </div>
        </section>
        <!-- about  -->
        <section class="about section" id="about">
            <div class="container">
                <!-- section title  -->
                   <h2 class="section-title padd-15">About Me</h2>
                   <div class="row">
                      <div class="about-img padd-15">
                        <!-- avatar -->
                        <img src="img/aboutimg.jpg" alt="aboutimg">
                     </div>
                     <div class="about-content padd-15">
                        <div class="rounded">
                            <div class="row">
                                <div class="about-text">
                                   <!-- about text  -->
                                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, amet exercitationem voluptatum laborum neque corporis sit dicta, veritatis quas, dolore voluptatem atque ut cum illo voluptatibus quia delectus vel quis et. Debitis exercitationem inventore cum! Nemo minus quos necessitatibus. Eos, ad quae! Maiores nisi cumque, atque doloremque alias suscipit pariatur eius ea! Eveniet et provident voluptate incidunt? Quo animi sint similique officiis doloremque laudantium quod!</p>
                                         
                                 </div>
                                 <div class="skills padd-15">
                                     <div class="row">
                                              <!-- skill item  -->
                                <div class="skill-item">
                                 <h4> Front-End Development</h4>
                                 <div class="progress">
                                     <div class="progress-in" style="width: 60%;background: rgb(255, 30, 82);"></div>
                                     <div class="skill-percent">60%</div>
                                 </div>
                             </div>
                              <!-- skill item  -->
                              <div class="skill-item">
                                  <h4>Skill 1</h4>
                                  <div class="progress">
                                      <div class="progress-in" style="width: 76%;background: rgb(38, 202, 112);" ></div>
                                      <div class="skill-percent">76%</div>
                                  </div>
                              </div>
                               <!-- skill item  -->
                             <div class="skill-item">
                              <h4>Skill 2</h4>
                              <div class="progress">
                                  <div class="progress-in" style="width: 70%;background: rgb(218, 221, 28);"></div>
                                  <div class="skill-percent">70%</div>
                              </div>
                                     </div>
                                 </div>
                                 <div class="cv-btn">
                                    <a href="#" class="btn btn-default">Download CV</a>
                                </div>
                             </div>
                             
                            </div>
                        </div>
                    </div>
                </div>

                <div class="fact-item-row ">
                    <!-- fact-item   -->
                   <!-- <div class="row"> -->
                      <div class="fact-item">
                         <i class="lni lni-thumbs-up"></i>
                        <div class="details">
                            <h3>00</h3>
                            <p>Project &nbspDone</p>
                        </div>  
                    </div>

                    <div class="fact-item">
                        <i class="lni lni-users"></i>
                        <div class="detais">
                            <h3>00</h3>
                            <p>Users</p>
                        </div>
                    </div>
                    
                </div>
            </div>
         </div>   
        </div>
        </section>

        <!--SERVICES-->
        <section class="services section" id="services">
            <div class="container">
                <!-- section title  -->
                <h2 class="section-title padd-15">Services</h2>
                <div class="row">
                    <!-- service item -->
                   <div class="service-item padd-15">
                       <div class="service-item-inner" style="background: #DFF5FF;">
                           <img src="./img/skill1webd.png" alt="webd">
                           <h3> Front-End Development</h3>
                           <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus voluptates modi voluptas non iste perferendis aliquid eaque ullam laudantium quasi!</p>  
                        </div>
                   </div>

                   <!-- service item -->
                   <div class="service-item padd-15">
                    <div class="service-item-inner" style="background: #DFF5FF;">
                        <img src="./img/skill2 demo.jpg" alt="skill2">
                        <h3>Service 2</h3>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus voluptates modi voluptas non iste perferendis aliquid eaque ullam laudantium quasi!</p>
                        
                     </div>
                 </div>

                 <!-- service item -->
                 <div class="service-item padd-15">
                    <div class="service-item-inner" style="background: #E0EDFE;">
                        <img src="./img/skill3 demo.jpg" alt="skill3">
                        <h3>Service 3</h3>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus voluptates modi voluptas non iste perferendis aliquid eaque ullam laudantium quasi!</p>
                        
                     </div>
                 </div>

                </div>
                  <div class="text padd-15">
                      <p>Looking for custom works?<a href="mailto:"> Click here </a>to contact me! 👋🏽</p>
                  </div>
            </div>
        </section>

        <!-- experiemce -->
        <section class="section" id="experience">
             <div class="container">
                <!-- section title  -->
                <h2 class="section-title padd-15">Experience</h2>
                <div class="row">
                    <!-- education -->
                  <div class="education padd-15"
                    ><div class="row">
                        <div class="timeline-box">
                            <div class="timeline">
                                 <!-- timeline item -->
                                 <div class="timeline-item">
                                    <i class="lni lni-graduation timeline-icon"></i>
                                    <h3 class="timeline-date">2020-Present
                                        <i class="lni lni-calendar"></i>
                                    </h3>
                                    <h3 class="timeline-title">Bachelor's Degree</h3>
                                    <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci doloribus laborum nisi voluptatem voluptates consectetur.</p>
                                 </div>
                               
                                  <!-- timeline item -->
                                 <div class="timeline-item">
                                    <i class="lni lni-graduation timeline-icon"></i>
                                    <h3 class="timeline-date">2015-2018
                                        <i class="lni lni-calendar"></i>
                                    </h3>
                                    <h3 class="timeline-title">High School</h3>
                                    <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci doloribus laborum nisi voluptatem voluptates consectetur.</p>
                                 </div>
                                 
                                 <!-- timeline item -->
                                 <div class="timeline-item">
                                    <i class="lni lni-graduation timeline-icon"></i>
                                    <h3 class="timeline-date">2007-2014
                                        <i class="lni lni-calendar"></i>
                                    </h3>
                                    <h3 class="timeline-title">Middle School</h3>
                                    <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci doloribus laborum nisi voluptatem voluptates consectetur.</p>
                                 </div>
                            </div>
                        </div>
                    </div>
                 </div>
                  
                   <!-- experience  -->
                   <div class="experience padd-15">
                   <div class="row">
                       <div class="timeline-box">
                           <div class="timeline">
                                <!-- timeline item -->
                                <div class="timeline-item">
                                   <i class="lni lni-briefcase timeline-icon"></i>
                                   <h3 class="timeline-date">November'21-Present
                                       <i class="lni lni-calendar"></i>
                                   </h3>
                                   <h3 class="timeline-title">Internship at XYZ</h3>
                                   <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci doloribus laborum nisi voluptatem voluptates consectetur.</p>
                                </div>
                              
                                 <!-- timeline item -->
                                <div class="timeline-item">
                                   <i class="lni lni-briefcase timeline-icon"></i>
                                   <h3 class="timeline-date">2020-2021
                                       <i class="lni lni-calendar"></i>
                                   </h3>
                                   <h3 class="timeline-title">Work 1</h3>
                                   <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci doloribus laborum nisi voluptatem voluptates consectetur.</p>
                                </div>
                                
                                <!-- timeline item -->
                                <div class="timeline-item">
                                   <i class="lni lni-briefcase timeline-icon"></i>
                                   <h3 class="timeline-date">2019-2020
                                       <i class="lni lni-calendar"></i>
                                   </h3>
                                   <h3 class="timeline-title">Work 2</h3>
                                   <p class="timeline-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci doloribus laborum nisi voluptatem voluptates consectetur.</p>
                                </div>
                           </div>
                       </div>
                   </div>
                </div>
                </div>
            </div>
        </section>

        <!-- Portfolio  -->

          <section class="portfolio section" id="portfolio">
              <div class="container">
                  <!-- section title  -->
                  <h2 class="section-title padd-15"Portfolio></h2>
                  <div class="row">
                       <div class="portfolio-filter padd-15">
                           <div class="portfolio-filter-inner">
                               <button type="button" class="active" data-filter ="all">Everything</button>
                               <button type="button"  data-filter ="art">Art</button>
                               <button type="button"  data-filter ="creative">Creative</button>
                               
                           </div>
                       </div>
                  </div>
                  <div class="row portfolio-items">
                      <!-- portfolio item     -->
                      <div class="portfolio-item padd-15" data-category="art"> 
                          <div class="portfolio-item-inner">
                              <div class="portfolio-item-thumbnail">
                                  <img src="./img/p1.jpg" alt="">
                                  <div class="mask"></div>
                              </div>
                              <span class="term">Art , Design</span>
                              <h3 class="portfolio-item-title">Project 1 <br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, maiores?</b></h3>
                              <span class="more-button">&hellip;</span>                         
                            </div>
                      </div>

                      <!-- portfolio item     -->
                      <div class="portfolio-item padd-15" data-category="design">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-item-thumbnail">
                                <img src="./img/p2.jpg" alt="">
                                <div class="mask"></div>
                            </div>
                            <span class="term">Creative</span>
                            <h3 class="portfolio-item-title">Project 2 <br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, nemo.</h3>
                            <span class="more-button">&hellip;</span>                         
                          </div>
                    </div>

                    <!-- portfolio item     -->
                    <div class="portfolio-item padd-15" data-category="art">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-item-thumbnail">
                                <img src="./img/p3.jpg" alt="">
                                <div class="mask"></div>
                            </div>
                            <span class="term">Art</span>
                            <h3 class="portfolio-item-title">Project 3 <br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, beatae?</h3>
                            <span class="more-button">&hellip;</span>                         
                          </div>
                    </div>
                    <!-- portfolio item     -->
                    <div class="portfolio-item padd-15" data-category="design">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-item-thumbnail">
                                <img src="./img/p4.jpg" alt="">
                                <div class="mask"></div>
                            </div>
                            <span class="term">Design</span>
                            <h3 class="portfolio-item-title">Project 4 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, quasi.</h3>
                            <span class="more-button">&hellip;</span>                         
                          </div>
                    </div>
                    
                     <!-- portfolio item     -->
                     <div class="portfolio-item padd-15" data-category="creative">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-item-thumbnail">
                                <img src="./img/p5.jpg" alt="">
                                <div class="mask"></div>
                            </div>
                            <span class="term">Creative</span>
                            <h3 class="portfolio-item-title">Project 5 <br>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde, nam?</h3>
                            <span class="more-button">&hellip;</span>                         
                          </div>
                    </div>

                     <!-- portfolio item     -->
                     <div class="portfolio-item padd-15" data-category="art">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-item-thumbnail">
                                <img src="./img/p6.jpg" alt="">
                                <div class="mask"></div>
                            </div>
                            <span class="term">Art , Design</span>
                            <h3 class="portfolio-item-title">Project 6 <br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate.</h3>
                            <span class="more-button">&hellip;</span>                         
                          </div>
                    </div>
                  </div>
              </div>
          </section>

           <!-- contact me  -->
             <section class="contact section" id="contact">
                   <div class= "container">
                       <!-- section title  -->
                         <h2 class="section-title padd-15">Contact Me</h2>
                         <div class="row">
                             <!-- contact box  -->
                             <div class="contact-box padd-15">
                                 <div class="contact-data">
                                     <!-- contact information  -->
                                     <div class="contact-information">
                                         <h3 class="contact-subtitle">
                                            Call Details  
                                         </h3>
                                         <span class="contact-description">
                                             <i class="lni lni-phone contact-icon"></i>
                                             Work : +91 9876543210
                                         </span>
                                     </div>

                                      <!-- contact information  -->
                                      <div class="contact-information">
                                        <h3 class="contact-subtitle">
                                           Write me by mail 
                                        </h3>
                                        <span class="contact-description">
                                            <i class="lni lni-user contact-icon"></i>
                                                bugsyy157@gmail.com
                                        </span>
                                    </div>
                                 </div>
                             </div>

                             <!-- contact form  -->
                             <form action="" class="contact-form padd-15">
                                 <div class="contact-inputs">
                                     <!-- contact content  -->
                                     <div class="contact-content">
                                         <input type="email" class="contact-input">
                                         <label for="" class="contact-label">Email</label>
                                         <span></span>
                                     </div>

                                      <!-- contact content  -->
                                      <div class="contact-content">
                                        <input type="text" class="contact-input">
                                        <label for="" class="contact-label">Subject</label>
                                        <span></span>
                                    </div>

                                     <!-- contact content  -->
                                     <div class="contact-content  contact-area">
                                        <textarea name="" id="" cols="30" rows="10" class="contact-input"></textarea>
                                        <label for="" class="contact-label">Message</label>
                                        <span></span>
                                    </div>
                                 </div>
                                 <a href="#" class="btn btn-default">Send Message</a>
                             </form>
                              
                         </div>
                   </div>
             </section>

             <!-- footer  -->
             <footer >
                 <p class="footer-text">
                    Copyright &copy; bugsyy🤩
                 </p>
             </footer>
           

    </main>
    
      <!-- JS -->
<script src="main.js"></script>    
    
</body>
</html>